import React, { Component } from 'react';
import {Popup} from 'antd-mobile'
import style from './footerAlert.scss'

class FooterAlert extends Component {
    constructor(props) {
        super(props);
        this.state = {
        	hkIndex: -1 , //香港勾选状态
        	amIndex: -1 , //澳门勾选状态
	        hkData:[],
	        amData:[]
        };
    }

	  hidePopup() {
		  Popup.hide(); //隐藏
    }

		componentWillMount(){
			console.log('hk选择的状态',sessionStorage.getItem('hkIndex'))
			if(sessionStorage.getItem('hkIndex')){  //缓存状态

				let hkIndex = sessionStorage.getItem('hkIndex')
				this.setState({
					hkIndex: hkIndex
				})
			}
			if(sessionStorage.getItem('amIndex')){  //缓存状态
				let amIndex = sessionStorage.getItem('amIndex')
				this.setState({
					amIndex: amIndex
				})
			}
		}

    choice(Index,type){
			console.log('选择的类型',Index,type)
			if(type =='hk'){
				if(sessionStorage.getItem('hkIndex') == Index){
					this.setState({
						hkIndex: -1
					});
					sessionStorage.setItem('hkIndex',-1)
				}else {
					this.setState({
						hkIndex: Index
					});
					sessionStorage.setItem('hkIndex',Index)
				}
			}else {
				if(sessionStorage.getItem('amIndex') == Index){
					this.setState({
						amIndex: -1
					});
					sessionStorage.setItem('amIndex',-1)
				}else {
					this.setState({
						amIndex: Index
					});
					sessionStorage.setItem('amIndex',Index)
				}
			}

    }

    /**
     * 渲染对应的列表
     */
	/*
    bizProvinceId: 440000
  	category: 1
	  createTime: 1461168000000
	  destName: "香港"
	  endorseFee: 1500
  	id: "4"
		serviceLocalFee: 2500
		serviceOtherFee: 4500
		serviceOutsideFee: 6800
		serviceSuburbFee: 0
		times: 4
		timesName: "一年一次"
		type: 1
		typeName: "个人旅游"
		updateTime: 1461168000000
		useFlag: 1
	*/

		componentDidMount() {
			let data =this.props.data,
					amData=[],
					hkData=[];
			for(let i=0;i<data.length;i++){
				if(data[i].category==1){
					 hkData.push(data[i])
				}else {
					 amData.push(data[i])
				}
			}

			this.setState({
				hkData: hkData,  //香港数据源
				amData: amData  //澳门数据源
			})
		}

    showList() {
        let type = this.props.type;
        switch (type){
          case 'visa':
	          return this.props.visa.map((e,i)=>{
		          return (<li key={i} onClick={() =>{this.props.choose(e.check,e.name,type,e.index)}}>{e.name}</li>)
	          });
          break;
	        case 'hkType':
		        return this.state.hkData.map((e,i)=>{  //有typeName字体深灰
			        return (<li key={i} onClick={() =>{this.props.choose(e.typeName,e.timesName,type);this.choice(i,'hk')}}>
				        {
				        	this.state.hkIndex ==i?<img className={style.choice} src="./images/choice.png"/>:''
				        }
				        {e.timesName}
				        </li>)
		        });
	        break;
	        case 'amType':
		        return this.state.amData.map((e,i)=>{
			        return (<li key={i} onClick={() => {this.props.choose(e.typeName,e.timesName,type);this.choice(i,'am')}}>
				        {
					        this.state.amIndex ==i?<img className={style.choice} src="./images/choice.png"/>:''
				        }
				          {e.timesName}
			        </li>)
		        });
		        break;
	        case 'personnelType':
		        return this.props.szList.map((e,i)=>{
			        return (<li key={i} onClick={() => this.props.choose(e.check,e.name,type)}>{e.name}</li>)
		        });
		        break;
        }
    }

    render() {
				console.log(this.state)
        return (
            <div className={style.footerAlertBox}>
               <ul className={style.listType}>
                 {this.showList()}
                 <li>取消选择</li>
               </ul>
                <div style={{height: '.38rem',background: '#f1f1f1'}}></div>
                <div className={style.btn} onClick={e=>this.hidePopup()}>取消</div>
            </div>
        )
    }
}

FooterAlert.defaultProps = {
  visa: [{index: 1,check:'free',name:'往来港澳个人旅游在签注(自由行)'},{index:3,check:'again',name:'往来港澳商务再次签注'},
	       {index:4,check:'spouse',name:'往来港澳夫妻探亲再签注'},{index:5,check:'sz',name:'在深圳非广东户籍'}],
	// hkList: [{index:0,check:'hkMany',name:'一年多次(仅限深圳户籍)'},{index:1,check:'hkTwo',name:'一年一次'},{index:2,check: 'hkThree',name:'一年二次'},
	// 				 {index:3,check:'four',name:'一年多次'},{index:4,check: 'five',name: '三月一次'},{index:5,check: 'five',name: '三月二次'},],
	// amList: [{index: 0,check:'amOne',name:'一年一次'},{index:1,check:'amThree',name:'三月一次'}],
	szList: [{index: 0, check: 'permit',name: '持居住证人员'},{index: 1, check: 'college',name: '高校大学生'}]
}

export default FooterAlert